<template>
  <div class="app-container">
    <el-row :gutter="10" class="row-bg">
      <el-col :span="8">
        <div class="box">
          <el-card>
            <div slot="header" class="clearfix">
              <b>Pressure / 压力1</b>
            </div>
            <table style="display: block; height: 230px">
              <tr>
                <td class="table_td">1#水泵进口压力</td>
                <td class="table_td2">{{ findVal(307).leiji | tofix(3) }}</td>
                <td class="table_td3">MPa</td>
                <td class="table_td">1#水泵出口压力</td>
                <td class="table_td2">{{ findVal(308).leiji | tofix(3) }}</td>
                <td class="table_td3">MPa</td>
              </tr>
              <tr>
                <td class="table_td">2#水泵进口压力</td>
                <td class="table_td2">{{ findVal(309).leiji | tofix(3) }}</td>
                <td class="table_td3">MPa</td>
                <td class="table_td">2#水泵出口压力</td>
                <td class="table_td2">{{ findVal(310).leiji | tofix(3) }}</td>
                <td class="table_td3">MPa</td>
              </tr>
              <tr>
                <td class="table_td">3#水泵进口压力</td>
                <td class="table_td2">{{ findVal(311).leiji | tofix(3) }}</td>
                <td class="table_td3">MPa</td>
                <td class="table_td">3#水泵出口压力</td>
                <td class="table_td2">{{ findVal(312).leiji | tofix(3) }}</td>
                <td class="table_td3">MPa</td>
              </tr>
              <tr>
                <td class="table_td">反冲洗总管压力</td>
                <td class="table_td2">{{ findVal(313).leiji | tofix(3) }}</td>
                <td class="table_td3">MPa</td>
              </tr>
            </table>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="box">
          <el-card>
            <div slot="header" class="clearfix">
              <b>Engine Status / 电机状态</b>
            </div>
            <el-table :data="tableData1" style="width: 100%" height="230">
              <el-table-column prop="pump" label="电机" width="160" />
              <el-table-column prop="status" label="运行状态" />
              <el-table-column prop="frequency" label="频率" />
              <el-table-column prop="time" label="运行时间" />
            </el-table>
          </el-card>
        </div>
      </el-col>
      <el-col :span="8">
        <el-card>
          <el-card shadow="hover">
            <el-row>
              <el-col :span="12" class="col_border">
                <div class="tip">全厂总功率</div>
                <div class="content">
                  <b style="">-- KW</b>
                </div>
              </el-col>
              <el-col :span="12" class="col">
                <div class="tip">全厂累计电度</div>
                <div class="content">
                  <b style="">-- KWh</b>
                </div>
              </el-col>
            </el-row>
          </el-card>
          <el-table :data="tableData2" style="width: 100%" height="195">
            <el-table-column prop="pump" label="电机" width="160" />
            <el-table-column prop="status" label="运行状态" />
            <el-table-column prop="frequency" label="频率" />
            <el-table-column prop="time" label="运行时间" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="16">
        <el-card>
          <div style="position: relative; height: 7rem">
            <div slot="header" class="clearfix">
              <b>Real Status / 实时状态</b>
            </div>
            <img :src="url" class="image img1" />
            <div v-for="(item, i) in imgArr" :key="i">
              <img :src="(item)" class="image img2" />
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="8">
        <div>
          <el-card class="row-bg">
            <div slot="header" class="clearfix">
              <b>Axial Fans / 轴流风机</b>
            </div>
            <el-table :data="tableData3" style="width: 100%" height="230">
              <el-table-column prop="pump" label="电机" width="160" />
              <el-table-column prop="status" label="运行状态" />
              <el-table-column prop="frequency" label="频率" />
              <el-table-column prop="time" label="运行时间" />
            </el-table>
          </el-card>
          <el-card class="row-bg">
            <div slot="header" class="clearfix">
              <b>液位 / 压力2</b>
            </div>
            <table style="display: block; height: 210px">
              <tr>
                <td class="table_td">滤后水液位</td>
                <td class="table_td2">{{ findVal(314).value | tofix(3) }}</td>
                <td class="table_td3">m</td>
                <td class="table_td">反冲洗水池液位</td>
                <td class="table_td2">{{ findVal(315).value | tofix(3) }}</td>
                <td class="table_td3">m</td>
              </tr>
              <tr>
                <td class="table_td">1#风机出口压力</td>
                <td class="table_td2">{{ findVal(303).leiji | tofix(3) }}</td>
                <td class="table_td3">MPa</td>
                <td class="table_td">2#风机出口压力</td>
                <td class="table_td2">{{ findVal(304).leiji | tofix(3) }}</td>
                <td class="table_td3">MPa</td>
              </tr>
              <tr>
                <td class="table_td">3#风机出口压力</td>
                <td class="table_td2">{{ findVal(305).leiji | tofix(3) }}</td>
                <td class="table_td3">MPa</td>
                <td class="table_td">气洗总管压力</td>
                <td class="table_td2">{{ findVal(306).leiji | tofix(3) }}</td>
                <td class="table_td3">MPa</td>
              </tr>
            </table>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import "@/assets/resources/comon0.css";
import { findByPage } from "@/api/dispatch/runningState";
import { binary } from "@/utils/common";

// 设置rem
const setHtmlFontSize = () => {
  const htmlDom = document.getElementsByTagName("html")[0];
  let htmlWidth =
    document.documentElement.clientWidth || document.body.clientWidth;
  htmlDom.style.fontSize = `${htmlWidth / 20}px`;
};

export default {
  name: "FlushingPumpRoom",
  components: {},
  data() {
    return {
      timer: null,
      setHtmlFontSize: setHtmlFontSize,
      url: require("@/assets/img/翔安图片/冲洗泵房/冲洗泵房.png"),
      data: [],
      imgArr: [],
      tableData1: [
        {
          pump: "#1",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#2",
          status: "停止",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#3",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#4",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#5",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#6",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
      ],
      tableData2: [
        {
          pump: "#1",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#2",
          status: "停止",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#3",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#4",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#5",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
      ],
      tableData3: [
        {
          pump: "#1",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#2",
          status: "停止",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#3",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#4",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#5",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#6",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#5",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#6",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
      ],
      tableData4: [
        {
          pump: "#1",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#2",
          status: "停止",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#3",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#4",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#5",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#6",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#4",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#5",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
        {
          pump: "#6",
          status: "运行",
          frequency: "工频",
          time: "12333",
        },
      ],
    };
  },
  created() {
    window.onresize = this.setHtmlFontSize;
    this.setHtmlFontSize(); // 设置rem
    // this.$nextTick(() => {
    //   this.getData()
    // })
  },
  mounted() {
    this.getData();
    this.timer = setInterval(this.getData, 1000 * 30);
  },
  beforeDestroy() {
    clearInterval(this.timer);
    document.getElementsByTagName("html")[0].style.fontSize = ""; // 重置rem
  },
  methods: {
    getData() {
      findByPage(5).then((response) => {
        this.data = response.data;
        const imgArr = [];
        response.data.forEach((dev) => {
          let num = binary(dev.info, 32);
          const info = num.split("").reverse();
          // 电机
          switch (true) {
            case dev?.type === 2 && dev?.display === true:
              if (info[1] === "1" && info[15] !== "1") {
                const img = require(`@/assets/img/翔安图片/冲洗泵房/${dev.id}-1.png`);
                imgArr.push(img);
              } else if (info[15] === "1") {
                const img = require(`@/assets/img/翔安图片/冲洗泵房/${dev.id}-15.png`);
                imgArr.push(img);
              }
            case dev?.type === 3 && dev?.display === true:
              if (info[1] === "1" && info[15] !== "1") {
                const img = require(`@/assets/img/翔安图片/冲洗泵房/${dev.id}-1.png`);
                imgArr.push(img);
              } else if (info[2] === "1" && info[15] !== "1") {
                const img = require(`@/assets/img/翔安图片/冲洗泵房/${dev.id}-2.png`);
                imgArr.push(img);
              } else if (info[15] === "1") {
                const img = require(`@/assets/img/翔安图片/冲洗泵房/${dev.id}-15.png`);
                imgArr.push(img);
              }
          }
        });
        this.imgArr = imgArr;
        this.handleTable1();
        this.handleTable2();
        this.handleTable3();
        console.log(imgArr);
      });
    },
    handleTable1(data) {
      for (let i = 0, j = 316; i < 6; i++, j++) {
        this.tableData1[i].pump = this.findVal(j).reMark;
        this.tableData1[i].time = this.findVal(j).rt + "";
        this.tableData1[i].status = this.handleStatus(j);
      }
    },

    handleTable2(data) {
      this.tableData2[0].pump = this.findVal(339).reMark;
      this.tableData2[1].pump = this.findVal(340).reMark;
      this.tableData2[2].pump = this.findVal(343).reMark;
      this.tableData2[3].pump = this.findVal(344).reMark;
      this.tableData2[4].pump = this.findVal(354).reMark;
      this.tableData2[0].time = this.findVal(339).rt + "";
      this.tableData2[1].time = this.findVal(340).rt + "";
      this.tableData2[2].time = this.findVal(343).rt + "";
      this.tableData2[3].time = this.findVal(344).rt + "";
      this.tableData2[4].time = this.findVal(354).rt + "";
      this.tableData2[0].status = this.handleStatus(339);
      this.tableData2[1].status = this.handleStatus(340);
      this.tableData2[2].status = this.handleStatus(343);
      this.tableData2[3].status = this.handleStatus(344);
      this.tableData2[4].status = this.handleStatus(354);
    },
    handleTable3(data) {
      for (let i = 0, j = 324; i < 331 - 324 + 1; i++, j++) {
        this.tableData3[i].pump = this.findVal(j).reMark;
        this.tableData3[i].time = this.findVal(j).rt + "";
        this.tableData3[i].status = this.handleStatus(j);
      }
      this.tableData3[0].pump = this.findVal(341).reMark;
      this.tableData3[0].time = this.findVal(341).rt + "";
      this.tableData3[0].status = this.handleStatus(341);
      this.tableData3[0].pump = this.findVal(342).reMark;
      this.tableData3[0].time = this.findVal(342).rt + "";
      this.tableData3[0].status = this.handleStatus(342);
    },
    handleStatus(id) {
      let num = binary(this.findVal(id).info, 32);
      const info = num.split("").reverse();
      if (info[1] === "1" && info[15] !== "1") {
        return "运行";
      } else if (info[15] === "1") {
        return "故障";
      } else return "停止";
    },
    findVal(id) {
      const arr = this.data.filter((item) => item?.id == id);
      if (arr.length === 0) {
        return [
          {
            id: 0,
            info: 0,
            leiji: 0,
            ord: 0,
            page: 0,
            remark: "",
            rt: 0,
            rtm: 0,
            spm: 0,
            type: 0,
            value: 0,
          },
        ];
      }
      return arr[0];
    },
  },
};
</script>
<style lang="scss" scoped>
* {
  font-size: 0.15rem;
}
.container {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  background-color: rgba(0, 0, 0, 0);
}

.table_td {
  width: 130px;
  height: 30px;
  background-color: #1890ff;
  color: #fff;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}

.table_td2 {
  width: 100px;
  height: 30px;
  text-align: right;
  display: table-cell;
  vertical-align: middle;
  padding-right: 10px;
}

.table_td3 {
  width: 20px;
  height: 30px;
  text-align: right;
  display: table-cell;
  vertical-align: middle;
  padding-right: 10px;
}

.box {
  height: 300px;
}

.row-bg {
  margin-bottom: 10px;
}

.col_border {
  text-align: center;
  position: relative;
  z-index: 100;
}

.col_border:before {
  border: 1px solid rgba(25, 186, 139, 0.17);
  position: absolute;
  content: "";
  height: 50%;
  width: 1px;
  background: rgba(255, 255, 255, 0.2);
  right: 0;
  top: 25%;
}

.col {
  text-align: center;
  position: relative;
  z-index: 100;
}

.tip {
  text-align: center;
  color: gray;
  font-size: 16px;
  margin-bottom: 10px;
}
.content {
  text-align: center;
  font-size: 12px;
}

.img1 {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
}
.img2 {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 100%;
}
</style>
